<template>
  <div class="register-wp">
  	<div class="content">
  		<img class="logo" src="@/assets/image/logo.png"/>
  		<div class="form-box">
  			<div class="title">欢迎注册</div>
  			<a-form class="t-form" ref="formRef" :label-col="{style: {width: '100px'}}">
	  			<a-form-item label="登录用户名" v-bind="oForm1.validateInfos.code">
	  				<a-input v-model:value="_d.form.code" placeholder="请输入"></a-input>
				   </a-form-item>
				   <a-form-item label="昵称" v-bind="oForm1.validateInfos.name">
	  				<a-input v-model:value="_d.form.name" placeholder="请输入"></a-input>
				   </a-form-item>
				   <a-form-item label="密码" v-bind="oForm1.validateInfos.password">
	  				<a-input-password v-model:value="_d.form.password" placeholder="请输入"></a-input-password>
				   </a-form-item>
				   <a-form-item label="确认密码" v-bind="oForm1.validateInfos.password2">
	  				<a-input-password v-model:value="_d.form.password2" placeholder="请输入"></a-input-password>
				   </a-form-item>
				   <a-form-item label="手机号码" v-bind="oForm1.validateInfos.systemUserId">
	  				<a-input v-model:value="_d.form.systemUserId" placeholder="请输入"></a-input>
				   </a-form-item>
				   <a-form-item label="验证码" v-bind="oForm2.validateInfos.yzm">
				   	<div class="send-box">
				   		<a-input class="ipt" v-model:value="_d.form.yzm" placeholder="请输入"></a-input>
				   		<a-button v-if="_d.time.n <= 0" class="btn" type="primary" @click="sendCode()">获取验证码</a-button>
							<a-button v-else class="btn" disabled>{{ _d.time.n }}秒</a-button>
				   	</div>
				   </a-form-item>
	  		</a-form>
	  		<div class="text-center">
	  			<a-button class="sub-btn" type="primary" @click="submit()">提交</a-button>
	  		</div>
  		</div>
  		<div class="btn-box">
  			<router-link class="btn" to="/login">返回登录</router-link>
  		</div>
  	</div>


		<promiseModal ref="promiseModalRef"></promiseModal>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {Form, notification} from "ant-design-vue";
	import promiseModal from "./modules/promiseModal.vue";

	import {ApiPost} from "@/api/request.js";
	import {Verify} from "@/utils/Tools.js";

	import {useRouter} from "vue-router";
	const router = useRouter();

	const promiseModalRef = ref();

	const _d = reactive({
		form: {
			code: '',
			name: '',
			password: '',
			password2: '',
			systemUserId: '',

			// code: 'ty',
			// name: 'tianyuan',
			// password: '123456',
			// password2: '123456',
			// systemUserId: '18875015762',

			yzm: '',
		},

		time: {
			n: 0,
			t: null
		},

		rules1: {
			code: [
		 		{ required: true, message: '请输入登录用户名' }
		 	],
			name: [
		 		{ required: true, message: '请输入昵称' }
		 	],
			password: [
		 		{ required: true, message: '请输入密码' },
				{ pattern: Verify.password, message: '密码为6-20位的数字字母组成'}
		 	],
			password2: [
		 		{ required: true, message: '请确认密码' },
		 		{ validator: (_rule, value) => {
		 			if(value !== _d.form.password) {
		 				return Promise.reject('两次密码输入不一致');
		 			}
					return Promise.resolve();
		 		} },
		 	],
			systemUserId: [
		 		{ required: true, message: '请输入手机号' },
		 		{ pattern: Verify.phone, message: '请输入正确的手机号码'}
		 	],
		},
		rules2: {
			yzm: [
		 		{ required: true, message: '请输入验证码' }
		 	],
		}
	})

	// const {resetFields, validate, validateInfos} = Form.useForm(_d.form, _d.rules);
	const oForm1 = Form.useForm(_d.form, _d.rules1);
	const oForm2 = Form.useForm(_d.form, _d.rules2);
	
	onMounted(() => {
	
	})


	function submit() {
		Promise.all([oForm1.validate(), oForm2.validate()]).then(async () => {
			promiseModalRef.value.open(_d.form.yzm, _d.form);
		})
	}

	// 验证验证码是否正确
	function verCode() {
		return ApiPost(`/Web/getsmscode/${_d.form.systemUserId}/${_d.form.yzm}`);
	}

	// 发送验证码
	function sendCode() {
		oForm1.validate().then(() => {
			ApiPost("/Web/getsmscode/"+_d.form.systemUserId).then(res => {
				downTime();
				notification.success({
					message: '提示',
					description: '验证码已发送成功',
				});
			})
		})
	}

	function downTime() {
		clearInterval(_d.time.t);
		_d.time.n = 60;
		_d.time.t = setInterval(() => {
			_d.time.n--;
			if(_d.time.n<=0) {
				clearInterval(_d.time.t);
			}
		}, 1000);
	}


</script>

<style lang="less" scoped>
.register-wp {
	position: relative;
	height: 100vh;
	background: #343541;
	.content {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: 0px;
		transform: translate(-50%, -50%);
		padding: 20px;
		width: 530px;
		height: 800px;
		.logo {
			display: block;
			margin: 0 auto 40px;
			width: 130px;
		}
		.form-box {
			padding: 20px 0 40px;
			width: 100%;
			background: #fff;
			border-radius: 4px;
			box-shadow: 0 0 10px rgba(15,163,127,.6);
			.title {
				margin-bottom: 30px;
				font-size: 28px;
				text-align: center;
				line-height: 60px;
				color: @primary-color;
			}
			.t-form {
				margin-left: 50px;
				width: 330px;
				:deep(.ant-form-item) {
					.ant-form-item-label label {
						color: @primary-color;
						&:before {
							display: none;
						}
					}
					.ant-form-item-control {
						.ant-input {
							border-color: @primary-color;
						}
						.ant-input-password {
							border-color: @primary-color;
							.ant-input {
								border: none;
							}
						}
					}
				}
				.send-box {
					display: flex;
					justify-content: space-between;
					gap: 10px;
					.ipt {
						width: 0;
						flex: 1;
					}
					.btn {
						padding: 0;
						width: 84px;
					}
				}
				.tk-box {
					:deep(.ant-form-item-label) {
						label:after {
							display: none;
						}
					}
					.tk {
						color: red;
					}
				}
			}
			.sub-btn {
				width: 120px;
			}
		}
	}
	.btn-box {
		padding-top: 20px;
		text-align: center;
		.btn {
			color: @primary-color;
		}
	}
}
</style>